<template>
  <view class="createCircle">
    <view class="top">
      <view class="back" @tap="toPage()">
        <image src="../../images/circle/zuojiantou.png" mode="widthFix"></image>
      </view>
      <text class="title">创建圈子</text>
      <text
        class="finish"
        :style="{ color: step == 1 ? '#5F5F5F' : '#0f6ede' }"
        @tap="toNext"
        >{{ step == 1 ? "" : "完成" }}</text
      >
    </view>
    <!-- 圈子名称 -->
    <view class="content name" v-if="step == 1">
      <view class="name-title"> 圈子名称 </view>
      <input
        class="name-input"
        v-model="circle.title"
        maxlength="20"
        placeholder-class="name-input-place"
        placeholder="如中国生意人圈"
      />
    </view>
    <view
      @tap="createC"
      :class="[{ active: circle.title.trim() }, 'button']"
      v-if="step == 1"
      >下一步</view
    >
    <!-- 圈子性质 -->
    <view class="content" v-if="step == 2">
      <view :class="[{ avtive: status == 1 }, 'tab']" @tap="toChoose(1)">
        <view class="status">
          <image
            v-show="status != 1"
            src="../../images/aliang/xuan_noChoose.png"
            mode="scaleToFill"
          ></image>
          <image
            v-show="status == 1"
            src="../../images/aliang/xian_choose.png"
            mode="scaleToFill"
          ></image>
        </view>
        <text>付费圈子</text>
      </view>
      <view :class="[{ avtive: status == 0 }, 'tab']" @tap="toChoose(0)">
        <view class="status">
          <image
            v-show="status == 0"
            src="../../images/aliang/xian_choose.png"
            mode="scaleToFill"
          ></image>
          <image
            v-show="status != 0"
            src="../../images/aliang/xuan_noChoose.png"
            mode="scaleToFill"
          ></image>
        </view>
        <text>免费圈子</text>
      </view>
    </view>
    <!-- 收费设置 -->
    <view class="chart" v-if="step == 2 && status == 1">
      <view class="chart-title"> 设置加入费用(永久) </view>
      <view class="money">
        <view class="icon">￥</view>
        <input
          id="input2"
          class="chart-input"
          :value="circle.money"
          :maxlength="maxlength"
          placeholder-class="name-input-place"
          focus="true"
          placeholder="请输入加入费"
          @input="handleInput"
          text="number"
        />
      </view>
    </view>
    <!-- 实名认证 -->
    <!--    <view class="chart isRealUser" v-if='step == 2 && status == 1 && !isRealUser'>
      <view class="chart-title">创建付费圈子</view>
      <view class="chart-title">需先在一起来往APP完成实名认证</view>
    </view> -->
    <!-- 发起 -->
    <view
      :class="[
        { active: (status == 1 && circle.money) || status == 0 },
        'button',
      ]"
      v-if="step == 2"
      :style="{ 'margin-top': status == 1 ? '0' : '246rpx' }"
      @tap="createC"
    >
      确定发起
    </view>
    <view class="remark" v-if="step == 2 && status == 1"
      >作为本圈的建立者，圈主应当履行群组管理责任，依据法律法规、用户协议和平台公约，规范群组网络行为和信息发布，构建文明有序的网络群体空间。建立收费圈，应提供相应价值的管理服务与责任，对圈子和圈友负责。</view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      step: 1,
      status: 1,
      circle: {
        title: "",
        money: "",
      },
      clientHeight: document.documentElement.clientHeight,
      focus: true,
      maxlength: 9,
      maxMoney: "",
      isRealUser: 0,
    };
  },
  onShow() {
    // this.getFaceAuthFlag();
  },
  onLoad() {
    // setTimeout(() => {
    // 	this.step = 1;
    // // // 	this.initialization();
    // // // 	this.firstChange();
    // },500)
    // this.$nextTick(() =>{
    // 	console.log(document.getElementById('input'));
    // 	var inputDiv = document.getElementById('input');
    // 	var wrapper = inputDiv.children[0];
    // 	var inputObj = wrapper.children[1];
    // 	inputObj.focus();
    // 	// document.getElementsByClassName('uni-input-input')[0].focus()
    // })
    this.maxjine();
  },
  watch: {},
  methods: {
    handleInput(e) {
      this.circle.money = e.detail.value;
      setTimeout(() => {
        this.circle.money = e.detail.value;
        this.circle.money = this.circle.money
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
        this.circle.money = this.circle.money.replace(
          /[^\d{1,}\.\d{1,}|\d{1,}]/g,
          ""
        );
        this.circle.money = this.circle.money.replace(
          /^(\-)*(\d+)\.(\d\d).*$/,
          "$1$2.$3"
        );
        if (this.circle.money[0] == ".") {
          this.circle.money = "";
        }
        if (
          this.circle.money[0] == 0 &&
          this.circle.money[1] &&
          this.circle.money[1] != "."
        ) {
          this.circle.money = "";
        }
        // 大小限制
        if (this.circle.money && Number(this.circle.money) < 1) {
          this.circle.money = 1;
        }
        if (Number(this.circle.money) > Number(this.maxMoney)) {
          this.circle.money = this.maxMoney;
        }
      }, 10);
    },
    toChoose(val) {
      // console.log(val)
      this.status = val;
      if (val == 0) {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      }
    },
    toNext() {
      if (this.step == 1 && !this.circle.title.trim()) {
        uni.showToast({
          title: "请输入圈子名称",
          duration: 2000,
          icon: "none",
        });
        this.circle.title = "";
      } else if (this.step == 1) {
        this.step = 2;
      } else if (this.step == 2) {
        this.createC();
      }
    },
    toPage() {
      if (this.step == 2) {
        this.step = 1;
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 10,
        });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    createC() {
      // 圈子名称
      if (this.step == 1 && !this.circle.title.trim()) {
        uni.showToast({
          title: "请输入圈子名称",
          duration: 2000,
          icon: "none",
        });
        this.circle.title = "";
        return;
      }
      // 圈子创建
      if (this.step == 2 && this.status == 1) {
        if (this.circle.money <= 0 || this.circle.money == null) {
          uni.showToast({
            title: "请输入加入费",
            duration: 2000,
            icon: "none",
          });
          this.circle.money = "";
          return;
        }
        var regu = "^[0-9]+.?[0-9]*$";
        var re = new RegExp(regu);
        if (!re.test(this.circle.money)) {
          uni.showToast({
            title: "请输入合法的加入费",
            duration: 2000,
            icon: "none",
          });
          this.circle.money = "";
          return;
        }
      }

      if (this.step == 2 && this.status == 1 && this.circle.money < 1) {
        uni.showToast({
          title: "最低不得低于1元",
          duration: 2000,
          icon: "none",
        });
        // this.circle.money = ;
        return;
      }
      if (
        this.step == 2 &&
        this.status == 1 &&
        this.circle.money > Number(this.maxMoney)
      ) {
        uni.showToast({
          title: "圈子收费最高" + this.maxMoney + "元",
          duration: 2000,
          icon: "none",
        });
        // this.circle.money = ;
        return;
      }
      if (this.step == 1) {
        this.step = 2;
        return;
      }
      if (this.step == 2) {
        // 圈子创建接口
        let token = uni.getStorageSync("token");
        this.request({
          url: "h5/circle/createdCircle",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgName: this.circle.title,
            chargeAmount: this.circle.money,
            isCharge: this.status,
            orgUrl: "https://img.yiqilaiwang.com/20201224104019.png",
            sourceType: 7,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.circle.title = "";
            this.circle.money = "";
            setTimeout(() => {
              uni.redirectTo({
                url: "/pages/circle/index?type=1&id=" + res.data.data.id,
              });
            }, 1000);
            uni.showToast({
              title: "创建成功",
              duration: 2000,
              icon: "success",
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    maxjine() {
      let token = uni.getStorageSync("token");
      const that = this;
      this.request({
        url: "h5/home/listBydictType?uid=",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          dictType: "FRIENDS_LIMIT",
        },
      }).then((res) => {
        if (res.data.code == 200) {
          that.maxMoney = res.data.data[0].dictValue.toString();
        } else if (res.data.code == 401) {
          uni.showToast({
            title: "登录失效，请重新授权登录！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    toApp() {
      if (this.openApp.iswx == "wx" && this.openApp.phone == "Android") {
        return;
      }
      this.openApp.toApps(1, "972edf43c65e11eaa31200163e05ff66");
    },
    getFaceAuthFlag() {
      let token = uni.getStorageSync("token");
      this.request({
        url: "h5/userInformation/faceAuthFlag",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {},
      }).then((res) => {
        if (res.data.code == 200) {
          // this.isRealUser = res.data.data.myUserAuthStatus;
        } else if (res.data.code == 401) {
          uni.showToast({
            title: "登录失效，请重新授权登录！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.createCircle {
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 92rpx;
    padding: 0 29rpx 0 36rpx;
    background: #ededed;

    .back {
      width: 90rpx;

      image {
        width: 40rpx;
        display: inline-block;
        vertical-align: middle;
      }
    }

    .title {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .finish {
      width: 90rpx;
      font-size: 28rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: right;
      color: #0f6ede;
    }
  }

  .content.name {
    padding: 117rpx 110rpx 125rpx;
    justify-content: center;
    flex-direction: column;

    .name-title {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
      line-height: 50px;
      margin-bottom: 6rpx;
    }

    .name-input {
      padding: 22rpx 50rpx;
      height: 67rpx;
      font-size: 48rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #000000;
      line-height: 67rpx;
      border-bottom: 1px solid #979797;
    }
  }

  .button {
    width: 678rpx;
    height: 80rpx;
    background: #82bbff;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 219rpx;
    font-size: 30rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    margin: auto;
  }

  .button.active {
    background: #0f6ede;
  }

  .content {
    padding: 67rpx 55rpx 0;
    display: flex;
    justify-content: space-between;

    .tab {
      position: relative;
      width: 300rpx;
      height: 189rpx;
      border: 1px solid #979797;
      border-radius: 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;

      .status {
        position: absolute;
        top: 25rpx;
        right: 25rpx;

        image {
          width: 34rpx;
          height: 34rpx;
        }
      }

      text {
        font-size: 36rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        color: #000000;
      }
    }

    .tab.avtive {
      background: #0f6ede;
      border: 1px solid #0f6ede;

      text {
        color: #ffffff;
      }
    }
  }

  .chart {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48rpx 125rpx 40rpx;
    &.isRealUser {
      padding: 81rpx 0 60rpx;
      .chart-title {
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #111111;
        line-height: 45rpx;
      }
    }
    .chart-title {
      font-size: 32rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #000000;
      line-height: 45rpx;
      margin-bottom: 2rpx;
    }

    .money {
      position: relative;
      padding: 22rpx 0 22rpx 130rpx;
      border-bottom: 1px solid #979797;

      .chart-input {
        text-align: left;
        font-size: 48rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #000000;
      }

      .name-input-place {
        text-align: left;
      }

      .icon {
        top: 22rpx;
        left: 82rpx;
        position: absolute;
        font-size: 48rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #000000;
      }
    }
  }

  .name-input-place {
    height: 67rpx;
    font-size: 48rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #999999;
    line-height: 67rpx;
  }
  .remark {
    width: 678rpx;
    margin: 30rpx auto 0;
    font-size: 24rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #999999;
    line-height: 33rpx;
  }
  .out-tag {
    position: relative;
    .position {
      position: absolute;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
  }
}
</style>
